<template>
    <div class="mobile-content">
    <van-sticky>
        <van-search v-model="keyword" shape="round" background="#4fc08d" placeholder="搜索电影、剧集..." @search="onSearch"
            @cancel="onCancel" />
    </van-sticky>
    <transition name="van-slide-left">
        <div v-show="!searched" class="search-content-box">
            <van-tabs v-model:active="active" swipeable animated sticky offset-top="54px">
                <van-tab title="热门电影">
                    <MediaList :data="popularMovieList" @select="onSelect" />
                </van-tab>
                <van-tab title="热门剧集">
                    <MediaList :data="popularTvList" @select="onSelect" />
                </van-tab>
            </van-tabs>
        </div>
    </transition>
    <transition name="van-slide-right">
        <div v-show="searched" class="search-content-box">
            <van-divider>共搜索到{{searchList.length}}条结果<a @click="onCancel">&nbsp;&nbsp;返回</a>
            </van-divider>
            <MediaList :data="searchList" @select="onSelect" />
        </div>
    </transition>
    <van-overlay :show="searching" :z-index="2">
        <div class="loading-wrapper" @click.stop>
            <van-loading>搜索中...</van-loading>
        </div>
    </van-overlay>

    <ActionSheet v-model:show="subitShow" title="订阅">
        <Subit />
    </ActionSheet>
    </div>
</template>

<script name="home-mobile" setup>
import {
    Sticky as VanSticky, Search as VanSearch, Overlay as VanOverlay, Loading as VanLoading, Divider as VanDivider, Tab as VanTab, Tabs as VanTabs, Button as VanButton
    , Dialog, Notify, ActionSheet
} from 'vant';
import { ref } from 'vue';
import { useRouter } from 'vue-router';


import MediaApi from '@/api/MediaApi';
import MediaList from '@/mobile/Torrent/components/MediaList.vue';
import Subit from '@/mobile/Home/Subit.vue';

const router = useRouter();

const keyword = ref('');
const searched = ref(false);
const searching = ref(false);
const searchList = ref([]);

const onSearch = () => {
    if (keyword.value) {
        searching.value = true;
        searchList.value = [];
        MediaApi.search({
            keyword: keyword.value
        }).then(res => {
            if (res.data.data) {
                searchList.value = res.data.data;
            }
            searched.value = true;
        }).then(_ => {
            searching.value = false;
        })
    } else {
        searched.value = false;
    }
}


const onCancel = () => {
    searched.value = false;
    keyword.value = '';
}



const onSelect = (item) => {
    router.push({
        path: '/m/sub/detail',
        query: {
            tmdbid: item.id,
            type: item.type
        }
    })
}

const subitShow = ref(false);




const active = ref(0)
const popularTvList = ref([]);
const popularMovieList = ref([]);

const loadPopularTv = () => {
    MediaApi.tvPopular().then(res => {
        if (res.data.data) {
            popularTvList.value = res.data.data;
        }
    })
}

const loadPopularMovie = () => {
    MediaApi.moviePopular().then(res => {
        if (res.data.data) {
            popularMovieList.value = res.data.data;
        }
    })
}

// init
loadPopularTv()
loadPopularMovie()
</script>
<style>
.swipe-img {
    width: 100%;
    height: 220px;
}

.search-content-box {
    padding-bottom: calc(var(--van-tabbar-height) + 8px);
}

.loading-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
</style>